/*
* 分析报告/盈利能力-风险控制-稳定性
*
*/
import React, { PropTypes } from 'react';
import { Table, Row, Col } from 'antd';

import RadarChart from './charts/RadarChart';
import utils from './utils';

const FeatureScores = ({ scoresConfig, title, nameMap, features }) => {
	const scoresFields = [];
	const scoresData = [];
	const scoreList = [];
	scoresConfig.forEach((name) => {
		const showName = nameMap[name] || name;
		const score = features['score' + utils.toCamelCase(name, true)] || 0;
		const value = features[utils.toCamelCase(name)] || 0;
		scoresFields.push(showName);
		scoreList.push({ name, showName, score: score.toFixed(2), value: value.toFixed(4) });
		scoresData.push(score.toFixed(2));
	});

	return (
		<div style={{ padding: 20, marginTop: 20, borderTop: '1px solid #ddd' }}>
			<Row>
				<h3>{title}</h3>
			</Row>
			<Row>
				<Col span={12}>
					<div style={{ margin: 10 }}>
						<RadarChart serieName={title} fields={scoresFields} data={scoresData} color={'#f96868'} />
					</div>
				</Col>
				<Col span={12}>
					<Table
						rowKey={record => (record.showName + record.value)}
						size="middle"
						pagination={false}
						columns={[{ title: '特征', dataIndex: 'showName' }, { title: '分数', dataIndex: 'score' }, { title: '特征值', dataIndex: 'value' }]}
						dataSource={scoreList}
					/>
				</Col>
			</Row>
		</div>
	);
}

export default FeatureScores;
